<!--# layout("/common/mallout.html",{"jsBase":"/js/mall/more/product/"}){ -->

<script src="http://www.11ziyun.com/js/arttemplate.js"></script>

<div class="area_view">
    <div class="are_hd border_none">
        <span><strong>商品分类 </strong>精选分类，提供更便捷的服务</span>
    </div>
    <div class="area_sd shop_1148">

        <!--# var firstId = 0; for(level1 in productMap){
            if(level1.key == 1){
              for(category in level1.value){
              if(categoryLP.first){ firstId =category.categoryId; -->
            <span class="cls${category.categoryId} atver" categoryId="cls${category.categoryId}" value="${category.categoryId}">${category.categoryName}</span>
               <!--#}else{ -->
                <span class="cls${category.categoryId}" categoryId="cls${category.categoryId}" value="${category.categoryId}">${category.categoryName}</span>
               <!--#} -->
               <!--#} -->
        <!--#} } -->
    </div>

    <div class="area_sd border_radius shop_mover">
        <!--# for(level1 in productMap){
          if(level1.key == 2){
            for(category in level1.value){ -->
                <!--# if(category.parentId == firstId){-->
                <span class="cls${category.parentId}" categoryId="cls${category.categoryId}" value="${category.categoryId}" style="display: inline-block">${category.categoryName}</span>
                <!--# }else{-->
                <span class="cls${category.parentId}" categoryId="cls${category.categoryId}" value="${category.categoryId}" style="display: none">${category.categoryName}</span>
                <!--#}-->
        <!--#} -->
        <!--#} } -->
    </div>
    <div class="area_bd shop_mover">
        <ul id="level3">

       <!--# for(level1 in productMap){
       if(level1.key == 3){
         for(category in level1.value){ -->
            <li class="cls${category.parentId}" categoryId="cls${category.categoryId}">
                <p><a href="/mall/category.do?categoryId=${category.categoryId}&type=${category.categoryHandleType}" target="_blank">
                    <!--# if(category.url == null){-->
                    <img src="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_01.png">
                    <!--# }else{-->
                    <img src="${imagepath}/${category.url}">
                    <!--# }-->
                </a>
                </p>
                <p class="text"><a href="/mall/category.do?categoryId=${category.categoryId}&type=${category.categoryHandleType}" target="_blank">${category.categoryName}</a></p>
            </li>
            <!--#} -->
            <!--#} } -->

        </ul>
    </div>
    <!---------分页------------>

</div>


<!-------------------------------->
<!--<div id="demo7"></div>
-->

<!--#} -->
<script>
    layui.use(['index'], function(){
        var index = layui.index
        index.init();
    });

    //点击一级分类 得到二级分类选中的值 后 ajax拼接数据
    $(document).on('click',".shop_1148 span",function(){
        if($(this).hasClass('atver')) return;

        $(this).addClass('atver').siblings().removeClass('atver');
        show_list();
        var categoryId =  $(".shop_mover span.atver").attr("value");

        sendAjax(categoryId);

    });

    //点击二级分类，得到选中的分类id ajax拼接数据
    $(document).on("click",".shop_mover span",function(){
        $(this).addClass('atver').siblings().removeClass('atver');
        var categoryId =  $(this).attr("value");
        sendAjax(categoryId);

    })

    function show_list()
    {
        $(".shop_mover span").css("display","none");
        var number_index=$(".shop_1148 span.atver").attr('categoryId');
        $(".shop_mover ."+number_index).css("display","inline-block");
        $(".shop_mover ."+number_index).eq(0).addClass("atver").siblings().removeClass('atver');
    }

    show_list()

    //分类图片加载
    function sendAjax(categoryId) {
        doAjax("/mall/getProductMore.json", 'post',{"categoryId":categoryId}, function (ret) {
            console.log(ret.data);
            var level3 = ret.data;
            var html = "";
            for(var i=0,l = level3.length;i<l;i++){
                html+="<li class='cls"+level3[i].parentId+"' categoryId='cls"+level3[i].categoryId+"'>"
                    +"<p>" ;
                if(level3[i].categoryHandleType == null){
                   html += "<a href='/mall/category.do?categoryId="+level3[i].categoryId+"&type=' target='_blank'>" ;
                }else{
                   html += "<a href='/mall/category.do?categoryId="+level3[i].categoryId+"&type="+level3[i].categoryHandleType+"' target='_blank'>" ;
                }
                if(level3[i].url == null){
                    html +="<img src='https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_01.png'>";
                }else{
                    html +="<img src='${imagepath}/"+level3[i].url+"'>";
                }
                   html+= "</a></p><p class='text'>" ;
                if(level3[i].categoryHandleType == null){
                    html+= "<a href='/mall/category.do?categoryId="+level3[i].categoryId+"&type=' target='_blank'>"+level3[i].categoryName+"</a>";
                }else{
                    html+= "<a href='/mall/category.do?categoryId="+level3[i].categoryId+"&type="+level3[i].categoryHandleType+" target='_blank'>"+level3[i].categoryName+"</a>";
                }
                      html+= "</p>"
                    +"</li>";
            }
            $("ul#level3").html(html);

        })
    }

</script>
